<template>
  <div class="index_container">
    <div class="index_header">
      <div class="index_title">叩丁狼电商运营平台</div>
      <el-icon @click="changeCollapse"><expand /></el-icon>
      <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link">
          {{ store.state.userInfo.username }}
          <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>首页</el-dropdown-item>
            <el-dropdown-item @click="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="main_container">
      <div class="index_nav">
        <el-col :span="12">
          <el-menu
            :default-active="route.path"
            :unique-opened="true"
            active-text-color="#409eff"
            background-color="#304156"
            class="el-menu-vertical-demo"
            text-color="#fff"
            :collapse="isCollapse"
            :router="true"
          >
            <el-menu-item index="/home">
              <span>首页</span>
            </el-menu-item>
            <el-sub-menu
              v-for="(item, index) in store.getters.getNewMenus"
              :key="item.id"
              :index="item.id + ''"
            >
              <template #title>
                <span>{{ item.title }}</span>
              </template>
              <template v-for="value in item.children">
                <div>
                  <el-menu-item
                    v-if="value.hidden === 0"
                    :key="value.id"
                    name="123"
                    :index="'/' + item.name + '/' + value.name"
                  >
                    {{ value.title }}
                  </el-menu-item>
                </div>
              </template>
            </el-sub-menu>
          </el-menu>
        </el-col>
      </div>
      <div class="index_content">
        <Breadcrumb :titleArr="titleArr" :toPath="toPath" class="breadcrumb" />
        <router-view class="list_content"></router-view>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Breadcrumb from "../components/Breadcrumb.vue";

import { reactive, toRefs, ref, watch } from "vue";
import { useStore } from "vuex";
import { Expand, ArrowDown } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import Cookies from "js-cookie";
import { ElMessageBox, ElMessage } from "element-plus";

const isCollapse = ref(false);
const store = useStore();
const router = useRouter();
const route = useRoute();
const menus = store.getters.getNewMenus;
let currentPath = route.path.split("/")[2]; //当前页面路径
const titleArr = ref<string[]>([]); // 用于赋值给面包屑的数组
let toPath = ref<string>(""); // 用于点击面包屑跳转到一级菜单
// 退出登录
const logout = () => {
  ElMessageBox.confirm("确认退出登录吗？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "退出成功",
      });
      // 删除token
      Cookies.remove("token");
      // 返回登录页面
      router.push("/login");
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消退出登录",
      });
    });
};

// 页面进入拿到当前路径对应的id，设置列表默认选中项和面包屑默认值
for (const key in menus) {
  if (menus[key].name === route.path.split("/")[1]) {
    titleArr.value.push(menus[key].title);
    toPath.value = "#/" + menus[key].name;
  }
  menus[key].children.filter(
    (item: { name: string; id: number; title: string }) => {
      if (item.name === currentPath) {
        titleArr.value.push(item.title);
      }
    }
  );
}

// 侧边列表开关按钮
const changeCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

// 监听路由变化，给面包屑赋值
watch(
  () => route.path,
  () => {
    console.log(route.path);
    if (route.path === "/home") {
      // 进入的是首页，需要专门对面包屑进行处理
      titleArr.value = [];
    } else {
      // 进入的不是首页，直接正常操作titleArr即可
      titleArr.value = [];
      for (const key in menus) {
        if (menus[key].name === route.path.split("/")[1]) {
          toPath.value = "#/" + menus[key].name; // 将一级菜单的路径赋值给面包屑，用于点击跳转页面
          titleArr.value.push(menus[key].title);
        }
        menus[key].children.forEach((item: { name: string; title: string }) => {
          if (item.name === route.path.split("/")[2]) {
            // 此处后端返回的数据有问题，稍作处理
            if (route.path.split("/")[2] === "addProduct") {
              titleArr.value.push("添加商品");
            } else {
              titleArr.value.push(item.title);
            }
          }
        });
      }
    }
  }
);
</script>
<style lang="less" scoped>
.index_container {
  height: 100vh;

  .index_header {
    display: flex;
    align-items: center;
    height: 70px;
    background: #409eff;
    color: #fff;
    padding: 0 20px;
    font-size: 23px;
    .index_title {
      margin-right: 25px;
    }
    :deep(.el-dropdown) {
      color: #fff;
      position: absolute;
      right: 20px;
      cursor: pointer;
    }
    .example-showcase .el-dropdown + .el-dropdown {
      margin-left: 15px;
    }
    .example-showcase .el-dropdown-link {
      display: flex;
      align-items: center;
    }
  }
  .main_container {
    display: flex;
    .index_nav {
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        height: calc(100vh - 70px);
      }
      .el-menu-vertical-demo {
        min-height: calc(100vh - 70px);
      }
      :deep(.el-col) {
        max-width: 100%;
        width: 100%;
      }
      :deep(.el-menu) {
        border: 0;
      }
    }
    .index_content {
      flex: 1;
      display: flex;
      flex-direction: column;
      width: calc(100vw - 200px);
      .breadcrumb {
        height: 14px;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
      }
      .list_content {
        padding: 20px;
        overflow-y: scroll;
        height: calc(100vh - 155px);
      }
    }
  }
}
</style>
